'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { motion } from 'framer-motion';
import { GitHub, Twitter, YouTube, Instagram } from '@mui/icons-material';

export default function Header() {
  const pathname = usePathname();
  
  const navItems = [
    { name: 'Settings', href: '/settings' },
    { name: 'Study', href: '/study' },
    { name: 'Word Note', href: '/word-note' },
  ];

  const socialLinks = [
    { Icon: GitHub, href: 'https://github.com' },
  ];

  return (
    <header className="fixed top-0 left-0 right-0 bg-black/50 backdrop-blur-sm z-50">
      <nav className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
        {/* Logo/Name */}
        <Link href="/" className="text-xl text-[#FF9851] font-semibold hover:text-gray-300 transition-colors">
          Bigface-Kitty
        </Link>

        {/* Navigation Items */}
        <div className="hidden md:flex items-center space-x-8">
          {navItems.map((item) => (
            <Link
              key={item.name}
              href={item.href}
              className={`relative ${
                pathname === item.href ? 'text-white' : 'text-gray-400'
              } hover:text-white transition-colors`}
            >
              {pathname === item.href && (
                <motion.div
                  layoutId="underline"
                  className="absolute left-0 right-0 h-0.5 bg-white bottom-[-4px]"
                />
              )}
              {item.name}
            </Link>
          ))}
        </div>

        {/* Social Icons */}
        <div className="flex items-center space-x-4">
          {socialLinks.map(({ Icon, href }, index) => (
            <a
              key={index}
              href={href}
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-400 hover:text-white transition-colors"
            >
              <Icon className="w-5 h-5" />
            </a>
          ))}
        </div>
      </nav>
    </header>
  );
}